-
刚开始写代码如下:(运行:http://jsbin.com/qonoliy/2/ed...)
<div id="test"> <div class="item" v-for="item in items" @click="toggle(item)" > <div>{{item.name}}</div> <div v-show="item.show"> 初始隐藏 </div> </div> </div> <script> new Vue({ el: '#test', data: { items: [{ name: 'a', show: false }, { name: 'b', show: false }, { name: 'c', show: false }] }, methods: { toggle: function(item) { item.show = !item.show; } } }); </script>
-
由于
data.items
是后端传过来的,没有show
这个字段, 无奈只好把data.items
遍历添加show
属性。(运行:http://jsbin.com/qonoliy/4/ed...)var data = [{ name: 'a', }, { name: 'b', }, { name: 'c', }]; data.map(function(item){ item.show = false; }); new Vue({ el: '#test', data: { items: data }, methods: { toggle: function(item) { item.show = !item.show; } } });
对服务端数据进行遍历处理还是不太优雅,如果能够在
v-for
循环中给 item 添加 show 属性就好了。
但是似乎不行。(运行:http://jsbin.com/qonoliy/5/ed...-
@vingojw 提供了在触发 toggle 事件是添加属性的方法 (运行:http://jsbin.com/qonoliy/6/ed...)
toggle: function(item) { Vue.set(item, 'show', this.show = !this.show); }
-
@X-Ray 提出了一个个写法(运行:http://jsbin.com/qonoliy/7/ed...)
toggle: function($index) { var item = this.items[$index]; var state = item.show; var obj = $.extend(true, {}, item); obj.show = !state; this.items.$set($index, obj); }
想起了 angluar 有个 ng-init 似乎可以做此事,vue 暂时没有 v-init 指令,那就自定义一个 v-init 指令
http://jsbin.com/qonoliy/8/ed...angluar 使用 v-init 实现
http://jsbin.com/finayi/edit?...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。